import React, { useState } from "react";
//导入 swetalert2
import Swal from "sweetalert2";

export default function TodoHeader(props) {
  //接收组件传入的新增任务函数
  let { addTodo } = props;
  //声明状态
  let [title, setTitle] = useState("");
  return (
    <div className="todo-header">
      <input
        onKeyUp={async (e) => {
          //如果按下的回车键
          if (e.code === "Enter") {
            //判断
            if (!title) {
              //标题不能为空
              Swal.fire({
                icon: "info",
                title: "操作提醒",
                text: "任务标题不能为空!!",
              });
              return;
            }
            try {
              //新增任务
              await addTodo(title);
              //清空 input 的值
              setTitle("");
              //提醒
              Swal.fire({
                icon: 'success',
                title: '操作成功！',
                text: '你已成功完成该操作。'
              });
            } catch (e) {}
          }
        }}
        type="text"
        placeholder="请输入你的任务名称，按回车键确认"
        value={title}
        onChange={(e) => {
          setTitle(e.target.value);
        }}
      />
    </div>
  );
}
